<template>
  <el-dialog :title="title" :visible.sync="display" :before-close="handleClose">
    <el-form
      :model="form"
      :rules="rules"
      label-width="100px"
      ref="form"
      class="form"
    >
      <el-form-item :label="$t('name')" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t('patch.tag')" prop="label">
        <el-input v-model="form.label" autocomplete="off"></el-input>
      </el-form-item> -->
      <el-form-item :label="$t('description')" prop="description">
        <el-input
          type="textarea"
          v-model="form.description"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item :label="$t('patch.address')" prop="address">
        <el-input v-model="form.address" autocomplete="off"></el-input>
      </el-form-item> -->
      <el-form-item :label="$t('patch.product_type')" prop="osName">
        <el-select v-model="form.osName" placeholder="请选择">
          <el-option
            v-for="item in productTypes"
            :key="item.name"
            :label="item.label"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('patch.CPU_arch')" prop="osArch">
        <el-select v-model="form.osArch" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.id"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button class="kylin-button" @click="handleOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getProductTypes, addProduct,editProduct } from "@/api/patch";
export default {
  props: {
    display: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    detail: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      action: "#",
      fileList: [],
      showfileMessage: false,
      productTypes: [],
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: this.$t("patch.product_name_require"),
            trigger: "change",
          },
        ],
        // label: [
        //   {
        //     required: true,
        //     message: this.$t("patch.product_label_require"),
        //     trigger: "change",
        //   },
        // ],
        osName: [
          {
            required: true,
            message: this.$t("patch.product_type_require"),
            trigger: "change",
          },
        ],
        osArch: [
          {
            required: true,
            message: this.$t("patch.product_arch_require"),
            trigger: "change",
          },
        ],
      },
      options: [
        { id: "x86_64", name: "x86_64" },
        { id: "aarch64", name: "aarch64" },
      ],
    };
  },
  methods: {
    getProductTypes,
    handleCancel() {
      this.resetForm();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let osInfo = this.form.osName.split("V");
          this.form.osName = osInfo[0];
          this.form.osVersion = `V${osInfo[1]}`;
          if (this.type === "create_prodcut") {
            addProduct(this.form).then((res) => {
              if (res.data.code == "0") {
                this.$refs.form.resetFields();
                this.$emit("click", "success");
                this.$message({
                  type: "success",
                  message: res.data.message,
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            });
          }
          if (this.type === "edit_prodcut") {
            editProduct({id:this.detail.id,data:this.form}).then((res) => {
              if (res.data.code == "0") {
                this.$refs.form.resetFields();
                this.$emit("click", "success");
                this.$message({
                  type: "success",
                  message: res.data.message,
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            });
          }
        }
      });
    },
    handleClose() {
      this.resetForm();
      this.$emit("click");
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.fileList = [];
    },
    handleFileChange(file, fileList) {
      if (fileList.length == 0) {
        this.showfileMessage = true;
      } else {
        if (fileList.length > 1) {
          this.fileList = fileList.slice(-1);
        }
        this.showfileMessage = false;
      }
    },
  },
  mounted() {
    // this.$nextTick(() => {
    this.getProductTypes().then((res) => {
      res.data.data.forEach((row) => {
        this.productTypes.push({
          id: row,
          name: row,
        });
      });
    });
    // });
  },
  watch: {
    detail: {
      handler(newName, oldName) {
        this.form = { ...newName };
      },
      deep: true,
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.form {
  width: 80%;
  margin: 0 auto;
}
</style>